<template>
  <div class="order-form">
    <van-nav-bar title="确认订单" left-text="返回" left-arrow @click-left="toCart()" />

    <div class="express-bar"></div>

    <van-cell-group class="addressGroup">
      <van-cell center isLink @click="show2 = true" icon="location-o" :title="default_name + ' ' + default_tel" :label="default_address_details" v-if="address_list.length > 0" />
      <van-cell
        isLink
        icon="location-o"
        @click="show2 = true"
        style="padding-top: 20px;padding-bottom: 20px; margin-top: 10px;"
        title="您还没有收货地址，点击这里创建"
        :label="default_address_details"
        v-if="address_list.length === 0"
      />
    </van-cell-group>
    <div class="express-bar"></div>

    <div class="order-form-item">
      <van-card
        v-for="item in carListConfirmLists"
        v-if="carListConfirmLists.length > 0"
        class="goods"
        :key="item.id"
        :num="item.quantity"
        :price="item.price"
        desc=""
        :title="item.title"
        :thumb="item.image"
        style="background-color: white;"
      />
    </div>

    <section class="remark">
      <van-cell-group><van-field v-model="remark" placeholder="留言：选填，可填写您的要求" /></van-cell-group>
    </section>

    <section style="margin-bottom: 100px;">
      <van-cell-group>
        <van-cell title="商品总金额" :value="'￥' + (total_price / 1).toFixed(2)" />
        <van-cell title="运费" value="￥0.00" />
        <van-cell v-if="discount < 10" title="享受折扣" :value="discount + '折'" />
      </van-cell-group>
    </section>

    <footer class="order-form-footer">
      <span class="price-wrap">
        需付款：
        <span class="price">￥{{ (total_price_final / 1).toFixed(2) }}</span>
      </span>
      <div class="right"><van-button type="primary" @click.native="toPay" class="orderBtn">提交订单</van-button></div>
    </footer>

    <van-popup v-model="show2" position="bottom">
      <van-button type="info" block @click="addressAdd()" class="addressAdd">+添加收货地址</van-button>

      <van-radio-group v-model="radio">
        <van-cell-group v-for="item in address_list" :key="item.id" class="addressGroup">
          <van-cell center="" isLink icon="location-o" :title="item.name + ' ' + item.phone" :label="item.address" @click="setCurrentAddress(item.id)" />
        </van-cell-group>
      </van-radio-group>
    </van-popup>
  </div>
</template>

<script>
import { Dialog, Card } from 'vant';
import cookies from '../utils/cookies.js';

import { mapActions, mapGetters } from 'vuex';

export default {
  components: {
    [Card.name]: Card
  },
  data() {
    return {
      addressPlaceHolder: '请选择地址',
      default_address: 0,
      address_list: [],
      remark: '',
      show: true,
      show2: false,
      radio: '1',
      default_name: '',
      default_tel: '',
      default_address_details: '',
      postage: 6,
      carListConfirmLists: [],
      total_price: 0,
      total_price_final: 0,
      discount: ''
    };
  },
  mounted() {
    // console.log(this.$route.query.carList);
    this.loadData();

    let cartSelected = this.getCheckedGoods();

    if(!cartSelected.length){
      this.$router.push({
        path: '/cart'
      });
    }

  },
  computed: {
    ...mapGetters(['carList', 'allMoney', 'allSelsect']),

    address() {
      return this.$store.state.address;
    }
  },
  methods: {
    ...mapActions(['clearSelected']),
    // 当没有收货地址的时候，跳转到添加页面
    addressAdd() {
      this.$router.push({
        path: '/addressAdd',
        query: {
          redirect_path: '/checkout'
        }
      });
    },
    getCheckedGoods() {
      let goodsCheck = [];
      this.carList.forEach(item => {
        if (item.selected == true) {
          goodsCheck.push({
            id: item.productId,
            title: item.title,
            price: item.sellPrice,
            image: item.image,
            quantity: item.num
          });
        }
      });
      return goodsCheck;
    },
    // 选择当前订单的收货地址
    setCurrentAddress(address_id) {
      this.show2 = false;
      this.default_address = address_id;
      for (var index in this.address_list) {
        if (this.address_list[index].id === address_id) {
          this.default_name = this.address_list[index].name;
          this.default_address_details = this.address_list[index].address;
        }
      }
    },

    // 获取地址列表 和 确认产品列表
    loadData() {
      this.apiPost('/shop.cart/checkout', { cart_goods: this.getCheckedGoods() }).then(res => {
        this.address_list = res.data.address_lists;
        this.carListConfirmLists = res.data.cart_goods_confirm_lists;
        this.total_price = res.data.total_price;
        this.total_price_final = res.data.total_price_final;
        this.discount = res.data.discount;

        if (this.address_list.length > 0) {
          this.default_address = this.address_list[0].id;
          this.default_name = this.address_list[0].name;
          this.default_tel = this.address_list[0].phone;
          this.default_address_details = this.address_list[0].address;
        }
        for (var index in this.address_list) {
          if (this.address_list[index].is_default === true) {
            this.default_address = this.address_list[index].id;
            this.default_name = this.address_list[index].name;
            this.default_tel = this.address_list[index].phone;
            this.default_address_details = this.address_list[index].address;
          }
        }
      });
    },
    toCart() {
      this.$router.push({
        path: '/cart'
      });
      // this.$store.state.cartCounter++;
      // this.$store.state.cartCounter--;
    },
    toPay() {
      if (this.default_address > 0) {
        // 生成一个新订单
        this.apiPost('/shop.order/create', {
          cart_confirm_items: this.carListConfirmLists,
          address_id: this.default_address,
          remark: this.remark
        }).then(res => {
          if (res.data > 0) {
            // 清空购物车中选择的商品
            this.clearSelected()

            //
            this.$router.push({
              path: '/orderSuccess',
              query: {
                order_id: res.data
              }
            });
          }
        });
      } else {
        Dialog.alert({
          message: '请先添加收货地址'
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
	@import "@/assets/scss/variable.scss";
.remark {
  margin-bottom: 10px;
}

.addressAdd{
  background-color: $colorPrimary;
  border: 0;
}

.order-form {

  .order-form-item {
    padding: 10px;
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .goods {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    line-height: 60px;
    .left {
      float: left;
      height: 60px;
      display: table-cell;
      vertical-align: middle;
      img {
        height: 100%;
        vertical-align: middle;
      }
    }
    .right {
      float: right;
    }
  }
  .order-form-footer {
    display: table;
    vertical-align: middle;
    overflow: hidden;

    position: fixed;
    width: 100%;
    bottom: 0;
    border-top: 1px solid #eee;
    left: 0;
    padding-left: 10px;

    background-color: #fff;
    .price-wrap {
      display: table-cell;
      text-align: left;
      margin-top: 10px;
      .price {
        color: $colorAccent;
        font-weight: 600;
      }
    }

    .right {
      text-align: right;
      display: table-cell;
      .orderBtn {
        border: none;
        border-radius: 0;
        background-color: $colorPrimary;
        padding-left: 30px;
        padding-right: 30px;
        color: white;
      }
    }
  }
}
</style>
